<template>
    <Maptalks :mapOnLoadCB="mapOnLoadCB"></Maptalks>
</template>

<script>
import Maptalks from "@/components/common/Maptalks.component.vue"
import MapLayerConst from "@/const/MapLayerConst"

export default {
    name: "AddAnimatedCustom.component",
    components: {Maptalks},
    setup() {

        let mapOnLoadCB = (map) => {
            let layer = new maptalks.VectorLayer(MapLayerConst.MAP_CUSTOM_ANIMATION_LAYER).addTo(map);

            let marker = new maptalks.Marker(map.getCenter(), {
                "symbol": {
                    "markerType": "ellipse",
                    "markerWidth": 50,
                    "markerHeight": 50,
                    "markerFill": "rgb(216,115,149)",
                    "markerFillOpacity": 0.8,
                    "markerLineColor": "#fff",
                    "markerLineWidth": 3
                }
            }).addTo(layer);

            let targetStyles = {
                "symbol": {
                    "markerWidth": 200,
                    "markerHeight": 200
                }
            };

            // animate by maptalks.animation.Animation
            let player = maptalks.animation.Animation.animate(
                targetStyles,
                {
                    duration: 1000,
                    easing: "out"
                },
                // callback of each frame
                function step(frame) {
                    if (frame.state.playState === "running") {
                        marker.updateSymbol(frame.styles.symbol);
                    }
                }
            );

            setTimeout(function () {
                player.play();
            }, 600);
        };

        return {
            mapOnLoadCB
        }
    }
}
</script>

<style scoped>

</style>
